<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../public/css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/shoplist.css" />
	</head>

	<body>
		<div class="blackpaper none" v-bind:class="{'none':!blackshow,'block':blackshow}" @click="blackDisplay"></div>
		<div class="shoplist">
			<div class="shoplist_head" @click="back()">
				<div class="back_last"></div>
				<h3>商家列表</h3>
			</div>
			<div class="load" v-bind:class="{'none':loading,'block':!loading}">
				<div class="csshub-loader">
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
					<div class="csshub-square"></div>
				</div>
			</div>
			<!--选项卡和列表-->
			<div class="none" v-bind:class="{'none':!loading,'block':loading}">
				<div class="shoplist_class">
					<div class="shoplist_class_title">
						<div v-bind:class="{'foucs':flshow}" @click="fl()">分类</div>|
						<div v-bind:class="{'foucs':pxshow}" @click="px()">排序</div>|
						<div v-bind:class="{'foucs':sxshow}" @click="sx()">筛选</div>
					</div>
					<div class="shoplist_class_list">
						<div class="shoplist_class_list_1" v-show="flshow">
							<ul class="shoplist_class_list_left">
								<li @click="qbsj('全部商家',$event)">
									<div class="shoplist_class_list_left_left">
										<img src="img/class_icon1.png" />全部商家
									</div>
									<div class="shoplist_class_list_left_right">
										<span>new</span>
										<div class=""></div>
									</div>
								</li>
								<li class="whitebgc" @click="kcClick($event)">
									<div class="shoplist_class_list_left_left">
										<img src="img/class_icon2.png" />快餐便当
									</div>
									<div class="shoplist_class_list_left_right">
										<span>new</span>
										<div class=""></div>
									</div>
								</li>
								<li @click="tsClick($event)">
									<div class="shoplist_class_list_left_left">
										<img src="img/class_icon3.png" />特色菜系
									</div>
									<div class="shoplist_class_list_left_right">
										<span>new</span>
										<div class=""></div>
									</div>
								</li>
								<li @click="ygClick($event)">
									<div class="shoplist_class_list_left_left">
										<img src="img/class_icon4.png" />异国料理
									</div>
									<div class="shoplist_class_list_left_right">
										<span>new</span>
										<div class=""></div>
									</div>
								</li>
								<li @click="tpClick($event)">
									<div class="shoplist_class_list_left_left">
										<img src="img/class_icon5.png" />甜品饮品
									</div>
									<div class="shoplist_class_list_left_right">
										<span>new</span>
										<div class=""></div>
									</div>
								</li>
								<li @click="ggClick($event)">
									<div class="shoplist_class_list_left_left">
										<img src="img/class_icon6.png" />瓜果蔬菜
									</div>
									<div class="shoplist_class_list_left_right">
										<span>new</span>
										<div class=""></div>
									</div>
								</li>
							</ul>
							<ul class="shoplist_class_list_right" v-show="kc">
								<li @click="howFar('盖浇饭')"><span>盖浇饭</span><span>10</span></li>
								<li @click="howFar('麻辣烫')"><span>麻辣烫</span><span>10</span></li>
								<li @click="howFar('包子粥店')"><span>包子粥店</span><span>10</span></li>
								<li @click="howFar('简餐')"><span>简餐</span><span>10</span></li>
								<li @click="howFar('米粉面馆')"><span>米粉面馆</span><span>10</span></li>
								<li @click="howFar('卷饼')"><span>卷饼</span><span>10</span></li>
								<li @click="howFar('麻辣香锅')"><span>麻辣香锅</span><span>10</span></li>
							</ul>
							<ul class="shoplist_class_list_right" v-show="ts">
								<li @click="howFar('川湘菜')"><span>川湘菜</span><span>10</span></li>
								<li @click="howFar('粤菜')"><span>粤菜</span><span>10</span></li>
								<li @click="howFar('东北菜')"><span>东北菜</span><span>10</span></li>
								<li @click="howFar('江浙菜')"><span>江浙菜</span><span>10</span></li>
								<li @click="howFar('山西面食')"><span>山西面食</span><span>10</span></li>
								<li @click="howFar('椰子饭')"><span>椰子饭</span><span>10</span></li>
								<li @click="howFar('新疆烤串')"><span>新疆烤串</span><span>10</span></li>
							</ul>
							<ul class="shoplist_class_list_right" v-show="yg">
								<li @click="howFar('烤肉')"><span>烤肉</span><span>10</span></li>
								<li @click="howFar('寿司')"><span>寿司</span><span>10</span></li>
							</ul>
							<ul class="shoplist_class_list_right" v-show="tp">
								<li @click="howFar('糕点')"><span>糕点</span><span>10</span></li>
								<li @click="howFar('饮品')"><span>饮品</span><span>10</span></li>
							</ul>
							<ul class="shoplist_class_list_right" v-show="gg">
								<li @click="howFar('水果')"><span>水果</span><span>10</span></li>
								<li @click="howFar('蔬菜')"><span>蔬菜</span><span>10</span></li>
							</ul>
						</div>
						<div class="shoplist_class_list_2" v-show="pxshow">
							<ul>
								<li @click="howFar('全部')">
									<div class="shoplist_class_list_2_zhineng"></div>
									<div class="">智能排序</div>
								</li>
								<li @click="howFar('全部')">
									<div class="shoplist_class_list_2_howfar"></div>
									<div class="">距离最近</div>
								</li>
								<li @click="xlpx()">
									<div class="shoplist_class_list_2_sale"></div>
									<div class="">销量最高</div>
								</li>
								<li @click="pfpx()">
									<div class="shoplist_class_list_2_grade"></div>
									<div class="">评分最高</div>
								</li>
							</ul>
						</div>
						<div class="shoplist_class_list_3" v-show="sxshow">
							<div class="shoplist_class_list_3_top">商家属性</div>
							<div class="shoplist_class_list_3_bottom">
								<div class="newshop" v-bind:class="{ 'choiceborder': newshop }" @click="newshopclick"><span>新</span>新店</div>
								<div class="ontime" v-bind:class=" { 'choiceborder': ontime }" @click="ontimeclick"><span>准</span>准时达</div>
								<div class="mokeysend" v-bind:class="{ 'choiceborder': mokeysend }" @click="mokeysendclick"><span>猴</span>猴哥配送</div>
							</div>
							<div class="shoplist_class_list_3_btn">
								<div @click="list3qk">清空</div>
								<div @click="list3tj">确定</div>
							</div>
						</div>
					</div>
				</div>
				<div class="shoplist_noshop" v-show="shop.length==0">附近暂无商家</div>
				<!--列表-->
				<div class="">
					<div class="shoplist_list" v-show="shop.length>0">
						<div class="shoplist_item" @click="tzshop(item.id)" v-for="item in shop">
							<div class="shoplist_item_left">
								<img :src="item.attributes.shopimg" />
							</div>
							<div class="shoplist_item_right">
								<h3>{{item.attributes.shopname}}</h3>
								<div class="shoplist_item_right_top">
									<div class="shoplist_item_right_top_stars">
										<div class="shoplist_item_right_top_stars_item" v-for="star in shopstar[$index]"></div>
										<div class="shoplist_item_right_top_grade">
											{{item.attributes.grade}}
										</div>
										<div class="shoplist_item_right_top_sale">
											月售{{item.attributes.salenum}}单
										</div>
									</div>
									<div class="shoplist_item_attr">
										<div class="shoplist_item_right_top_zsd" v-show="shopattr1[$index]">
											准时达
										</div>
										<div class="shoplist_item_right_top_hgzs" v-show="shopattr2[$index]">
											猴哥专送
										</div>
									</div>
								</div>
								<div class="shoplist_item_right_bottom">
									<div class="shoplist_item_right_bottom_price">
										<div class="shoplist_item_right_bottom_startprice">￥{{item.attributes.startprice}}起送</div>/
										<div class="shoplist_item_right_bottom_farprice">配送费约￥{{item.attributes.sendprice}}</div>
									</div>
									<div class="shoplist_item_right_bottom_howfar">{{b2cFar[$index]}}km</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../public/js/Zepto_min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../public/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZscUBbG2AyUHu7cCjKn9We5YoPHBUBBE"></script>
		<script src="../public/js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.2/av-min.js"></script>
		<script src="js/shoplist.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>